<template>
	<view class="u-page">
		<u-transition :show="true" mode="fade-up">
			<view v-show="img" class="img" ref="bgimg">
			</view>
			<scroll-view :scroll-top="toscroll" :show-scrollbar="false" scroll-with-animation="true" scroll-y
				class="u-flex-column" @scroll="ontouch" id="gd" ref="gd">
				<u-gap :height="vxbottom+20"></u-gap>
				<view class="u-flex" :height="vxheight" @click="ck()">
					<view class="u-flex u-flex-xy-center">
						<u-icon :customStyle="{fontWeight:'bold'}" :label="address" name="map-fill" :size="vxheight-10">
						</u-icon>
					</view>

				</view>
				<u-gap :height="10"></u-gap>
				<xbutton v-show="onceday==0" txt="今日の免费盲盒" @click="mh()"></xbutton>
				<u-gap :height="10"></u-gap>
				<view class="u-flex u-flex-between">
					<view class="u-flex-column u-flex-fill" ref="bb" style="flex: 1;">
						<view class="u-flex-column shopborder" @click="cj(i)" v-for="(i,x) in task2" :id="'b_'+x">
							<view v-if="i.status==1">
								<view class="u-flex" style="height: 300rpx;">
									<image style="width: 100%;height: 100%;" :src="i.shop['img']"></image>
								</view>
								<view class="u-flex">
									<view class="u-flex-center u-flex " style="flex: 1;">
										<image style="width: 100%;height: 100%;" v-if="i.tasktype==1"
											src="/static/mt.png">
										</image>
										<image style="width: 100%;height: 100%;" v-else-if="i.tasktype==2"
											src="/static/elm.png"></image>
									</view>
									<text v-text="i.shop.title" style="flex: 10"></text>
								</view>
								<text v-text="i.shop.content"></text>
								<view style="font-size: 5px;">
								距离<text v-text="i.distance"></text>千米
								</view>
							</view>
						</view>
					</view>
					<view class="u-flex-column u-flex-fill" ref="aa" style="flex: 1;">
						<view class="u-flex-column shopborder" @click="cj(i)" v-for="(i,x) in task1" :id="'a_'+x">
							<view v-if="i.status==1">
								<view class="u-flex"  :style="x==0?{height: '360rpx'}:{height: '300rpx'}">
									<image style="width: 100%;height: 100%;" :src="i.shop.img"></image>
								</view>
								<view class="u-flex">
									<view class="u-flex-center u-flex " style="flex: 1;">
										<image style="width: 100%;height: 100%;" v-if="i.tasktype==1"
											src="/static/mt.png">
										</image>
										<image style="width: 100%;height: 100%;" v-else-if="i.tasktype==2"
											src="/static/elm.png"></image>
									</view>
									<text v-text="i.shop.title" style="flex: 10"></text>
								</view>
								<text v-text="i.shop.content"></text>
								<br>
								<view style="font-size: 5px;">
								距离<text v-text="i.distance"></text>千米
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-gap :height="110"></u-gap>
			</scroll-view>
			<u-modal :show="show" :content="content" @cancel="qx" @confirm="qr()" :showCancelButton="true">
			</u-modal>
		</u-transition>
		<widget name="buttom"></widget>
	</view>
</template>

<script>
	import qqmapsdk from "../../common/qqmap-wx-jssdk.min.js"
	import widget from "../service/widget"
	import xbutton from "../vue/xbutton.vue"
	export default {
		components: {
			widget,
			xbutton
		},
		data() {
			return {
				content: "当天之内请下单！",
				address: "",
				show: false,
				onceday: 0,
				toscroll: 0,
				size: 0,
				scrollTop: 0,
				userid: 1,
				text: "",
				vxleft: 0,
				vxbottom: 0,
				vxtop: 40,
				vxright: 0,
				vxwidth: 0,
				vxheight: 30,
				vxrightpx: 10,
				list1: [
					'https://uviewui.com/common/logo.png',
					'https://uviewui.com/common/logo.png',
					'https://uviewui.com/common/logo.png'
				],
				scrollTop: 0,
				img: "",
				current: 1,
				pages: 1,
				size: 10,
				total: 1,
				selecttask: {},
				task: [{
					id: 0,
					url: "",
					img: 'https://uviewui.com/common/logo.png',
					title: "测试商品",
					content: "测试推介",
					logo: "https://uviewui.com/common/logo.png",
					display: false

				}]
			}
		},
		methods: {
			load() {
				var that = this
				this.userid = uni.getStorageSync('userid');
				this.$http.postf('task/page', {
					current: 1,
					size: 10,
					longitude: getApp().globalData.longitude,
					latitude: getApp().globalData.latitude,
				}).then(res => {
					if (res.statusCode == 200) {
						let x = JSON.parse(res.data).data
						that.current = x.current
						that.total = x.total
						that.size = x.size
						that.pages = x.pages
						that.task = x.records
					}
				})
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		getApp().globalData.longitude = res.longitude
				// 		getApp().globalData.latitude = res.latitude
				// 	}
				// });
				var that = this
				setTimeout(() => {
					let h = getApp().globalData.windowHeight
					that.$refs.gd.$el.style.height = h + "px"
					that.$refs.bgimg.$el.style.height = h / 2 + "px"
					that.$http.postf('user/find?id=' + that.userid).then(res => {
						if (res.statusCode == 200) {
							let x = JSON.parse(res.data).data
							that.onceday = x.onceday
						}
					})
				}, 1000);
				// this.$nextTick(() => {
				// 	let h = getApp().globalData.windowHeight
				// 	this.$refs.gd.$el.style.height = h + "px"
				// 	this.$refs.bgimg.$el.style.height = h / 2 + "px"
				// 	this.$http.postf('user/find?id=' + this.userid).then(res => {
				// 		if (res.statusCode == 200) {
				// 			that.onceday = res.data.data.onceday
				// 		}
				// 	})
				// });
			},
			ck() {
				uni.navigateTo({
					url: "/pages/waimai/map"
				});
			},
			RandomNumBoth(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				var num = Min + Math.round(Rand * Range); //四舍五入
				return num;
			},
			qx() {
				this.show = false
			},
			qr() {
				var that = this
				this.$http.postf('order/confirm', {
					id: that.userid,
					shopid: that.selecttask.shop.id,
					taskid: that.selecttask.id
				}).then(res => {

				})
				this.show = false
			},
			mh() {
				this.$http.postf('user/onceday', {
					id: this.userid
				}).then(res => {
					if (res.statusCode == 200) {
						this.onceday = 1
					}
				})
				let x = this.RandomNumBoth(1, 2)
				var that = this
				if (x == 1) {
					let y = 0;
					if (this.task1.length < 10) {
						y = this.RandomNumBoth(0, this.task1.length - 1)
					} else {
						y = this.RandomNumBoth(0, 9)
					}

					let h = getApp().globalData.windowHeight
					that.$refs.aa.$children[y].$el.id = "xxx"
					that.toscroll = that.$refs.aa.$children[y].$el.getBoundingClientRect().top - getApp().globalData
						.windowHeight / 2

				} else {
					let y = 0;
					if (this.task2.length < 10) {
						y = this.RandomNumBoth(0, this.task2.length - 1)
					} else {
						y = this.RandomNumBoth(0, 9)
					}
					let h = getApp().globalData.windowHeight
					that.toscroll = that.$refs.bb.$children[y].$el.getBoundingClientRect().top - getApp().globalData
						.windowHeight / 2
					that.$refs.bb.$children[y].$el.id = "xxx"
				}
			},
			cj(task) {
				this.show = true
				this.img = task.shop.bgimg
				let content = ""
				if (task.ishaveimg) {
					content += "必须带图评价！"
				}
				if (task.littlesize) {
					content += "必须" + task.littlesize + "字！"
				}
				if (task.nocan) {
					content += "不能点" + task.nocan + "！"
				}
				if (task.can) {
					content += "只能点" + task.can + "！"
				}
				if (task.money) {
					content += "满" + task.money + "补" + task.returnmoney + "米！"
				} else {
					if (task.returnmoney) {
						content += "最高补" + task.returnmoney + "米！"
					}
				}
				content += "请当天之内下单！"
				this.content = content
				this.selecttask = task
			},
			getBracketStr(text) {
				let result = ''
				if (text == "")
					return result
				let regex = /\((.+?)\)/g;
				let options = text.match(regex)
				if (options !== "") {
					let option = options[0]
					if (option !== "") {
						result = option.substring(1, option.length - 1)
					}
				}
				return result
			},
			ontouch(event) {
				if (this.img != undefined && this.img != "") {
					let size = this.$refs.bgimg.$el.style.transform == "" ? "scale(1)" : this.$refs.bgimg.$el.style
						.transform
					let options = this.getBracketStr(size)
					if (options != "") {
						let mathd = 1
						if (!isNaN(event.detail.deltaY)) {
							mathd = event.detail.deltaY / 150
							let mathdd = (Number(options) - Number(mathd))
							if (mathdd < 1) {
								mathdd = 1
							}
							this.$refs.bgimg.$el.style.transform = "scale(" + mathdd + ")";
							this.$refs.bgimg.$el.style.backgroundImage =
								"url(" + this.img + "),linear-gradient(rgba(20, 19, 26, " + (mathdd - 1) / 1 +
								"), rgba(20, 19, 26, " + (mathdd - 1) / 1 + "), rgba(20, 19, 26, 1))"
						}
					}
				}
			}
		},
		onReady() {
			let that = this

			const QQMap = new qqmapsdk({
				key: "KKHBZ-FEKKK-XWUJB-A64ZX-R5XBQ-RVBFP"
			})
			if (getApp().globalData.selectp) {
				getApp().globalData.selectp = false
				let x = getApp().globalData.address
				if (x == this.address || x == "") {

				} else {
					this.address = getApp().globalData.address
					that.load()
				}

			} else {
				if (getApp().globalData.address == "") {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							getApp().globalData.latitude = res.latitude
							getApp().globalData.longitude = res.longitude
							that.load()
							QQMap.reverseGeocoder({
								
								location: {
									latitude: getApp().globalData.latitude,
									longitude: getApp().globalData.longitude
								},
								success: (res) => {
									//定位成功
									uni.showToast({
										title: '定位成功',
										duration: 2000,
										icon: "none"
									})
									getApp().globalData.address = res.result.formatted_addresses
										.recommend
									that.address = res.result.formatted_addresses.recommend
								},
								fail: function(res) {
									uni.showToast({
										title: '定位失败',
										duration: 2000,
										icon: "none"
									})
								}
							})
						}
					});
				} else {
					that.address = getApp().globalData.address
				}
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.vxleft = menuButtonInfo.left
			this.vxbottom = menuButtonInfo.bottom
			this.vxtop = menuButtonInfo.top
			this.vxright = menuButtonInfo.right
			this.vxwidth = menuButtonInfo.width
			this.vxheight = menuButtonInfo.height
			this.vxrightpx = getApp().globalData.windowWidth - menuButtonInfo.right
			// #endif
		},
		mounted() {

		},
		watch: {
			img() {
				this.$refs.bgimg.$el.style.backgroundImage =
					"url(" + this.img + "),linear-gradient(rgba(20, 19, 26, 0), rgba(20, 19, 26, 0), rgba(20, 19, 26, 1))"
			}
		},
		computed: {
			task1() {
				let task1 = []
				for (var i = 0; i < this.task.length; i++) {
					if (i % 2 == 0) {
						//task2.push(shop[i])
					} else {
						task1.push(this.task[i])
					}
				}
				return task1
			},
			task2() {
				let task2 = []
				for (var i = 0; i < this.task.length; i++) {
					if (i % 2 == 0) {
						task2.push(this.task[i])
					} else {
						//task1.push(shop[i])
					}
				}
				return task2
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes sky {

		75% {
			background: $bgwidget2;
		}

		100% {
			background: green;
		}
	}


	#xxx {
		animation-name: sky;
		animation-duration: 2s;
		animation-timing-function: ease-in;

	}

	.back {
		background-color: rgba(20, 19, 26, 1);
		padding: 0rpx 15rpx 0rpx 15rpx;
	}


	.img {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;

		background-size: contain;
		background-blend-mode: color-dodge;
		background-repeat: no-repeat;
		background-attachment: fixed;

		background-image: url(), linear-gradient(rgba(20, 19, 26, 0), rgba(20, 19, 26, 0), rgba(20, 19, 26, 1));
	}

	.shopborder {
		margin: 10rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: $bgwidget;
	}

	.shopborder image {
		overflow: hidden;

	}
</style>
